<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-24 17:49:16
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-09-08 09:49:17
 * @FilePath: /nhw/src/components/SideBtn/index.vue
-->
<template>
  <div
    class="view-btn-container"
    :style="{ top: cy + 'px' }"
    @click="go2viewSteps"
    @touchmove.prevent="btnMove"
  >
    <Icon name="renwuchaxun" size=".53rem" class-prefix="iconfont" />
    查看流程
  </div>
</template>

<script>
import { Icon } from "vant";
export default {
  name: "SideBtn",

  components: { Icon },

  directives: {},
  props: {
    listId: {
      type: String,
    },
    to: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      cy: 400,
    };
  },

  mounted() {},

  methods: {
    go2viewSteps() {
      if (JSON.stringify(this.to) === "{}") return;
      this.$router.push(this.to);
    },
    btnMove(e) {
      const top = e.touches[0].clientY;
      if (top < 200) {
        this.cy = 200;
      } else if (top > this.$store.state.windowHeight - 200) {
        this.cy = this.$store.state.windowHeight - 200;
      } else {
        this.cy = top;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "~assets/font/font.less";
@import url("~style/var.less");
.view-btn-container {
  z-index: 999;
  position: fixed;
  top: 50%;
  right: 4px;
  width: 194px;
  height: 63px;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 28px;
  line-height: 63px;
  text-align: center;
  color: @primary;
  background: #fff;
  border: 1px solid;
  text-indent: -30px;
  .iconfont {
    vertical-align: middle;
  }
}
</style>